<div class="blocklist-item" ng-click="$ctrl.onSelect($ctrl.model)">
  <div class="blocklist-item-box">
    <span ng-class="['blocklist-item-logo', 'endpoint-item', { azure: $ctrl.model.Type === 3 }]">
      <i
        ng-if="$ctrl.model.Type !== 4 && $ctrl.model.Type !== 5 && $ctrl.model.Type !== 6 && $ctrl.model.Type !== 7"
        ng-class="$ctrl.model.Type | endpointtypeicon"
        class="fa-4x blue-icon"
        aria-hidden="true"
      ></i>
      <img ng-if="$ctrl.model.Type === 4" src="~@/assets/images/edge_endpoint.png" />
      <img ng-if="$ctrl.model.Type === 5 || $ctrl.model.Type === 6" src="~@/assets/images/kubernetes_endpoint.png" />
      <img ng-if="$ctrl.model.Type === 7" src="~@/assets/images/kubernetes_edge_endpoint.png" />
    </span>

    <span class="col-sm-12">
      <div class="blocklist-item-line endpoint-item">
        <span>
          <span class="blocklist-item-title endpoint-item">
            {{ $ctrl.model.Name }}
          </span>
          <span class="space-left blocklist-item-subtitle">
            <span ng-if="$ctrl.isEdgeEndpoint()">
              <span ng-if="!$ctrl.model.EdgeID" class="label label-default"><s>associated</s></span>
              <span ng-if="$ctrl.model.EdgeID">
                <span class="label" ng-class="{ 'label-danger': !$ctrl.isCheckInValid, 'label-success': $ctrl.isCheckInValid }">heartbeat</span>
                <span class="space-left small text-muted" ng-if="$ctrl.model.LastCheckInDate">
                  {{ $ctrl.model.LastCheckInDate | getisodatefromtimestamp }}
                </span>
              </span>
            </span>

            <span ng-if="!$ctrl.isEdgeEndpoint()">
              <span class="label label-{{ $ctrl.model.Status | endpointstatusbadge }}">
                {{ $ctrl.model.Status === 1 ? 'up' : 'down' }}
              </span>
              <span class="space-left small text-muted" ng-if="$ctrl.model.Snapshots[0]">
                {{ $ctrl.model.Snapshots[0].Time | getisodatefromtimestamp }}
              </span>
              <span class="space-left small text-muted" ng-if="$ctrl.model.Kubernetes.Snapshots[0]">
                {{ $ctrl.model.Kubernetes.Snapshots[0].Time | getisodatefromtimestamp }}
              </span>
            </span>
          </span>
        </span>
        <span>
          <span class="small" ng-if="$ctrl.model.GroupName"> Group: {{ $ctrl.model.GroupName }} </span>
          <button ng-if="$ctrl.isAdmin" class="btn btn-link btn-xs" ng-click="$ctrl.editEndpoint($event)"><i class="fa fa-pencil-alt"></i> </button>
        </span>
      </div>

      <div class="blocklist-item-line endpoint-item" ng-if="$ctrl.model.Snapshots[0]">
        <span class="blocklist-item-desc">
          <span>
            <span style="padding: 0 7px 0 0">
              <i class="fa fa-th-list space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].StackCount }}
              {{ $ctrl.model.Snapshots[0].StackCount === 1 ? 'stack' : 'stacks' }}
            </span>
            <span style="padding: 0 7px 0 7px" ng-if="$ctrl.model.Snapshots[0].Swarm">
              <i class="fa fa-list-alt space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].ServiceCount }}
              {{ $ctrl.model.Snapshots[0].ServiceCount === 1 ? 'service' : 'services' }}
            </span>
            <span style="padding: 0 7px 0 7px">
              <i class="fa fa-cubes space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].RunningContainerCount + $ctrl.model.Snapshots[0].StoppedContainerCount }}
              {{ $ctrl.model.Snapshots[0].RunningContainerCount + $ctrl.model.Snapshots[0].StoppedContainerCount === 1 ? 'container' : 'containers' }}
              <span ng-if="$ctrl.model.Snapshots[0].RunningContainerCount > 0 || $ctrl.model.Snapshots[0].StoppedContainerCount > 0">
                -
                <i class="fa fa-power-off green-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].RunningContainerCount }}
                <i class="fa fa-power-off red-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].StoppedContainerCount }}
                /
                <i class="fa fa-heartbeat green-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].HealthyContainerCount }}
                <i class="fa fa-heartbeat orange-icon" aria-hidden="true"></i> {{ $ctrl.model.Snapshots[0].UnhealthyContainerCount }}
              </span>
            </span>
            <span style="padding: 0 7px 0 7px">
              <i class="fa fa-hdd space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].VolumeCount }}
              {{ $ctrl.model.Snapshots[0].VolumeCount === 1 ? 'volume' : 'volumes' }}
            </span>
            <span style="padding: 0 7px 0 7px">
              <i class="fa fa-clone space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].ImageCount }}
              {{ $ctrl.model.Snapshots[0].ImageCount === 1 ? 'image' : 'images' }}
            </span>
          </span>
        </span>
        <span class="small text-muted">
          {{ $ctrl.model.Snapshots[0].Swarm ? 'Swarm' : 'Standalone' }} {{ $ctrl.model.Snapshots[0].DockerVersion }}
          <span ng-if="$ctrl.model.Type === 2">+ <i class="fa fa-bolt" aria-hidden="true"></i> Agent</span>
          <span style="padding: 0 7px 0 0" ng-if="$ctrl.model.Snapshots[0].Swarm">
            <i class="fa fa-hdd space-left space-right" aria-hidden="true"></i>{{ $ctrl.model.Snapshots[0].NodeCount }}
            {{ $ctrl.model.Snapshots[0].NodeCount === 1 ? 'node' : 'nodes' }}
          </span>
        </span>
      </div>

      <div class="blocklist-item-line endpoint-item" ng-if="!$ctrl.model.Snapshots[0] && $ctrl.model.Type !== 5 && $ctrl.model.Type !== 6 && $ctrl.model.Type !== 7">
        <span class="blocklist-item-desc"> No snapshot available </span>
      </div>

      <div class="blocklist-item-line endpoint-item" ng-if="$ctrl.model.Kubernetes.Snapshots[0] && ($ctrl.model.Type === 5 || $ctrl.model.Type === 6 || $ctrl.model.Type === 7)">
        <span class="blocklist-item-desc">
          <span>
            <span style="padding: 0 7px 0 0"> <i class="fa fa-microchip space-right" aria-hidden="true"></i>{{ $ctrl.model.Kubernetes.Snapshots[0].TotalCPU }} CPU </span>
            <span style="padding: 0 7px 0 7px">
              <i class="fa fa-memory space-right" aria-hidden="true"></i>{{ $ctrl.model.Kubernetes.Snapshots[0].TotalMemory | humansize }} RAM
            </span>
          </span>
        </span>
        <span class="small text-muted">
          Kubernetes {{ $ctrl.model.Kubernetes.Snapshots[0].KubernetesVersion }}
          <span style="padding: 0 0 0 7px">
            <i class="fa fa-hdd space-left space-right" aria-hidden="true"></i>
            {{ $ctrl.model.Kubernetes.Snapshots[0].NodeCount }} {{ $ctrl.model.Kubernetes.Snapshots[0].NodeCount === 1 ? 'node' : 'nodes' }}
          </span>
        </span>
      </div>

      <div class="blocklist-item-line endpoint-item" ng-if="!$ctrl.model.Kubernetes.Snapshots[0] && ($ctrl.model.Type === 5 || $ctrl.model.Type === 6 || $ctrl.model.Type === 7)">
        <span class="blocklist-item-desc"> - </span>
      </div>

      <div class="blocklist-item-line endpoint-item">
        <span class="small text-muted">
          <span ng-if="$ctrl.model.Type === 1 || $ctrl.model.Type === 2 || $ctrl.model.Type === 4">
            <span class="small text-muted">
              <i class="fa fa-microchip"></i> {{ $ctrl.model.Snapshots[0].TotalCPU }}<i class="fa fa-memory space-left"></i> {{ $ctrl.model.Snapshots[0].TotalMemory | humansize }}
            </span>
            <span class="space-left space-right">-</span>
          </span>
          <span ng-if="$ctrl.endpointTags.length === 0"> <i class="fa fa-tags" aria-hidden="true"></i> No tags </span>
          <span ng-if="$ctrl.endpointTags.length > 0">
            <i class="fa fa-tags" aria-hidden="true"></i>
            {{ $ctrl.endpointTags }}
          </span>
        </span>
        <span class="small text-muted" ng-if="$ctrl.model.Type !== 4 && $ctrl.model.Type !== 7">
          {{ $ctrl.model.URL | stripprotocol }}
        </span>
      </div>
    </span>
  </div>
</div>
